<template>
	<view class="container" :key="myKey">
		<nav-top :title="navTitle" :type="navType" />
		<nav-background :url="navBackgroundUrl" :imageHeight="navTopBackgroundImageHeight" />
		<Mask :upLeftToBottomRightFunction="maskFunction" :maskState="maskState" :maskInfo="maskInfo" />
		<view class="content">
			<view class="base-info" @click="needLogin">
				<image @click="toChangeMyInfo" class="avatar" src="@/static/images/my/avatar@2x.png"></image>
				<view class="info">
					<text class="nickname">{{information.name}}</text>
					<text class="phone-number">{{transPhone(information.phone)}}</text>
				</view>
			</view>
			<view class="colect-evaluate">
				<view class="colect" @click="toMyCollection">
					<image class="colect-add" mode="widthFix" src="@/static/images/my/colect@2x.png"></image>
					<text>店铺收藏</text>
				</view>
				<view class="evaluate" @click="toMyComment">
					<image class="evaluate-bubble" mode="widthFix" src="@/static/images/my/evaluate@2x.png"></image>
					<text>我的评价</text>
				</view>
			</view>
			<view class="my-list">
				<view @click="listClick(item)" class="list-item" v-for="item in myList" :id="item.id" :key="item.id">
					<image class="icon" :src="item.imageUrl"></image>
					<text>{{item.title}}</text>
					<image class="arrow" src="@/static/images/my/arrow@2x.png"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
	} from "vue";
	import {
		useStore
	} from "vuex"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import navBackgroundUrl from "@/static/images/my/myTopBar@2x.png";
	import mySource from "@/static/images/my/mySource@2x.png";
	import myAddress from "@/static/images/my/myAddress@2x.png";
	import myService from "@/static/images/my/myService@2x.png";
	import storeSettlement from "@/static/images/my/storeSettlement@2x.png";
	import becomeRider from "@/static/images/my/becomeRider@2x.png";
	import helpCenter from "@/static/images/my/helpCenter@2x.png";
	import request from "@/Api/request";

	const store = useStore();

	// 头部参数
	const navTitle = "";
	const navType = "nothing";
	const navTopBackgroundImageHeight = 460

	// 列表信息 id方便对照对应是见传递参数 
	const myList = [{
			id: "MySouorce",
			title: "我的资料",
			imageUrl: mySource
		},
		{
			id: "MyAddress",
			title: "我的地址",
			imageUrl: myAddress
		},
		{
			id: "MyService",
			title: "我的客服",
			imageUrl: myService
		},
		{
			id: "storeSettlement",
			title: "商铺入驻",
			imageUrl: storeSettlement
		},
		{
			id: "becomeRider",
			title: "成为骑手",
			imageUrl: becomeRider
		},
		{
			id: "helpCenter",
			title: "帮助中心",
			imageUrl: helpCenter
		},
	];

	// 遮罩层开关
	const maskState = ref(false);
	let maskInfo = reactive({})

	//个人信息获取

	// 电话号码的四位变*
	function transPhone(phone) {
		if (!phone) {
			return
		}
		return ("" + phone).substr(0, 3) + "****" + ("" + phone).substr(7)
	}

	function toMyCollection() {
		uni.navigateTo({
			url: "/pages/My/MyCollection/MyCollection"
		})
	}

	function toMyComment() {
		uni.navigateTo({
			url: "/pages/My/MyComment/MyComment"
		})
	}


	// 列表中的每一项的对应是事件
	function listClick(option) {
		if (option.id === "MySouorce" || option.id === "MyAddress") {
			uni.navigateTo({
				url: `/pages/My/${option.id}/${option.id}`
			})
		} else {
			//列表的遮罩层事件
			maskInfo = {
				desc: option.title,
				contact: "电话客服(12314412352)"
			}
			maskState.value = true;
			uni.hideTabBar();
		}
	}

	// 跳转到我的资料进行修改
	function toChangeMyInfo() {
		uni.navigateTo({
			url: '/pages/My/MySouorce/MySouorce'
		})
	}

	// 是否登录以及登录的步骤函数,即授权手机号码00
	let maskLogin = ref();
	let information = reactive({});
	onLoad((options) => {
		maskLogin.value = options.maskNewInfo;
		maskInfo.desc = options.maskNewInfo;
		if(uni.getStorageSync('satoken')){
		// if (false) {
			console.log("已登录");
			// 已经登陆的处理
			store.commit("login", uni.getStorageSync('userInfo'))
			const userInfo = uni.getStorageSync('userInfo');
			// 踩雷 此处若直接赋值会和 数组对象一样无法保持information的响应式.原理是对于对象的赋值是地址的修改,因此丢失响应式.
			for (let key in userInfo) {
				information[key] = userInfo[key]
			}A
			return
		} else {
			// 未登录的处理
			maskState.value = true
			uni.hideTabBar();
			information = {
				name: "登录/注册",
				phone: ""
			};
			//若已经点击一键登录,则不按照第一次载入执行
			if (maskLogin.value) {
				return
			}
			maskInfo = {
				desc: "login"
			}
		}
	})

	function needLogin() {
		console.log(information);
	}


	//遮罩层中的一键登录的事件传递,打开下一层


	// 数据获取后的页面更新
	let myKey = ref("myKey0")

	// 遮罩层函数对象
	const maskFunction = {

		//列表中的电话事件
		callService: () => {
			console.log("你好");
		},

		//关闭遮罩层
		close: () => {
			maskState.value = false;
			uni.showTabBar();

		},

		// 登录同意协议按钮
		agree() {
			console.log("yes");
		},


		//登录的事件注册,传递给My页面
		login() {
			uni.reLaunch({
				url: `/pages/My/My?maskNewInfo=${"getTel"}`
			})
		},

		lockPhone() {
			//前后端不协调,暂时手动设置token
			uni.request({
				url: "http://localhost:8890/login/wxLogin",
				method: 'POST',
				dataType: 'json',
				data: {
					loginCode: "123456",
				},
				success: (res) => {
					if (res.data.code === 200) {
						store.commit("login", res.data.data.user)
						uni.setStorageSync('satoken', res.data.data.sessionKey);
						uni.setStorageSync('userInfo', res.data.data.user)
						information = store.state.user;
					}
				},
			});
			this.close()
		},

		otherPhone() {
			console.log("换个号码");
			this.close()
		},

		notAllow() {
			console.log("不绑定号码");
			this.close()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;

		.base-info {
			display: flex;
			margin: 32rpx 0 48rpx;

			.avatar {
				width: 136rpx;
				height: 136rpx;
				margin-right: 24rpx;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 8rpx;

				.nickname {
					color: #333333;
					font-size: 40rpx;
					font-weight: 600;

				}

				.phone-number {
					color: #333333;
					font-size: 28rpx;
					font-weight: 400;
				}
			}


		}

		.colect-evaluate {
			display: flex;
			gap: 26rpx;
			font-size: 28rpx;
			font-weight: 600;

			.colect,
			.evaluate {
				width: 330rpx;
				height: 128rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 32rpx;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.colect {
				background: url("@/static/images/my/storeColect@2x.png") no-repeat;
				background-size: contain;
			}


			.evaluate {
				background: url("@/static/images/my/myEvaluate@2x.png") no-repeat;
				background-size: contain;
			}
		}

		.my-list {
			width: 100%;
			border-radius: 24rpx;
			background: #fff;
			margin: 32rpx 0 16rpx;
			padding: 40rpx 32rpx;
			display: flex;
			flex-direction: column;
			gap: 56rpx;

			.list-item {
				display: flex;
				align-items: center;
				width: 100%;
				position: relative;

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 32rpx;
				}

				text {
					color: #333333;
					font-size: 28rpx;
					font-weight: 500;
				}

				.arrow {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 0;
				}
			}
		}

	}
</style>